<template>
    <view style="height: 100%">
        <view v-if="loading" class="l-skeleton-container l-class">
            <view
                v-if="avatar"
                :class="'l-avatar-class l-skeleton-avatar bg ' + (active ? 'active' : '') + ' l-skeleton-avatar-' + avatarShape"
                :style="'width:' + avatarSize + ';height:' + avatarSize"
            ></view>

            <view class="l-skeleton-right">
                <view v-if="titleClone" class="l-skeleton-title-container" :style="'height:' + avatarSize">
                    <view :class="'l-skeleton-title bg ' + (active ? 'active' : '')" :style="'height:' + titleHeight"></view>
                </view>

                <view
                    v-if="paragraph"
                    :class="'l-row-class l-skeleton-rows bg ' + (active ? 'active' : '')"
                    :style="'height:' + item.height + ';width:' + item.width"
                    v-for="(item, index) in r"
                    :key="index"
                ></view>
            </view>
        </view>

        <slot v-else />
    </view>
</template>

<script>
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            titleClone: '',
            titleHeight: '',
            r: []
        };
    },

    externalClasses: ['l-class', 'l-title-class', 'l-avatar-class', 'l-row-class'],
    mixins: [validator],

    props: {
        loading: {
            type: Boolean,
            default: true
        },
        title: {
            type: Boolean,
            default: true
        },
        paragraph: {
            type: Boolean,
            default: true
        },
        active: {
            type: Boolean,
            default: true
        },
        avatar: Boolean,
        titleWidth: String,
        avatarSize: String,
        avatarShape: {
            type: String,
            default: 'circle',
            options: ['circle', 'square']
        },
        rowsWidth: {
            type: [Array, String],
            default: '60%'
        },
        rowsHeight: {
            type: [Array, String],
            default: '34rpx'
        },
        rows: Number
    },

    watch: {
        rows_rowsWidth_rowsHeight: {
            deep: true,
            immediate: true,

            handler: function (newValue, oldValue) {
                const { t, a, e } = newValue;

                this._getResult(t, a, 'rowsW', '100%');
                this._getResult(t, e, 'rowsH', '34rpx');
                this._toRows(t);
            }
        }
    },

    methods: {
        _arrRepeat(t, a) {
            const e = [];
            for (let r = 0; r < a - 1; r++) {
                e.push(t);
            }
            return e;
        },
        _getResult(t, a, e, r) {
            if (Array.isArray(a)) {
                this[e] = a;
            } else {
                const s = this._arrRepeat(r, t);
                s.push(a);
                this[e] = s;
            }
        },
        _toRows(t) {
            let a = [];
            for (let e = 0; e < t; e++) {
                a.push({
                    width: this.rowsW[e],
                    height: this.rowsH[e]
                });
            }
            this.setData({
                r: a
            });
        }
    },

    created: function () {}
};
</script>
<style>
.l-skeleton-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}
.l-skeleton-avatar {
    height: 72rpx;
    width: 72rpx;
    margin-right: 20rpx;
}
.l-skeleton-avatar-circle {
    border-radius: 50%;
}
.l-skeleton-right {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.l-skeleton-title {
    width: 100%;
    height: 34rpx;
}
.l-skeleton-title-container {
    height: 72rpx;
    width: 50%;
    display: flex;
    align-items: center;
}
.l-skeleton-rows {
    margin-top: 20rpx;
}
.bg {
    background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
    background-size: 400% 100%;
}
.active {
    animation: loading 1.4s ease infinite;
}
@keyframes loading {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}
</style>
